﻿$(function () {
    toastr.options.positionClass = 'toast-bottom-center';
    var vm = new Vue({
        el: '#app',
        data: {
            templateId: null,
            name: null,
            contentJson: null,
            department: null,
            deviceType: null,
            formLabelWidth: '80px',
            hiprintTemplate: null,
            fields: null,

            width: null,
            height: null,
            paperType: 'A4',// 纸张类型
            paperTypes: [
                {
                    name: 'A3',
                    id: 'A3'
                },
                {
                    name: 'A4',
                    id: 'A4'
                },
                {
                    name: 'A5',
                    id: 'A5',
                },
                {
                    name: 'B3',
                    id: 'B3'
                },
                {
                    name: 'B4',
                    id: 'B4'
                },
                {
                    name: 'B5',
                    id: 'B5'
                }
            ]
        },
        methods: {
            // 获取排班计划
            getTemplate() {
                const vm = this;
                return new Promise(resolve => {
                    var templateId = window.utils.getQuery('tempalteId');
                    if (!templateId) {
                        abp.message.error('未获取到templateId参数');
                    }
                    else {
                        abp.ajax({
                            type: 'get',
                            url: `/api/template/get?id=${templateId}`
                        }).then(res => {
                            if (res.code === 0) {
                                var data = res.data;
                                vm.templateId = templateId;
                                vm.name = data.name;
                                vm.department = data.department;
                                vm.deviceType = data.deviceType;
                                vm.contentJson = JSON.parse(data.jsonContent);
                                resolve();
                            }
                        })
                    }
                });
            },

            getFields() {
                const vm = this;
                return new Promise((resolve, reject) => {
                    var templateId = window.utils.getQuery('tempalteId');
                    if (!templateId) {
                        abp.message.error('未获取到templateId参数');
                    } else {
                        abp.ajax({
                            type: 'get',
                            url: `/api/template/get-fields?templateId=${templateId}`
                        }).then(res => {
                            debugger;
                            if (res.code === 0) {
                                vm.fields = JSON.parse(res.data);
                                resolve();
                            } else {
                                abp.message.error(res.err);
                                reject();
                            }
                        })
                    }
                })
            },

            // 渲染设计器
            // Vue中混含Jquery代码，虽不规范以后再说
            hiPrintInit() {
                const vm = this;
                hiprint.init({
                    providers: [new CustomElementTypeProvider()]
                });

                //设置左侧拖拽事件
                hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
                //hiprint.PrintElementTypeManager.build('.hiprintEpContainer', 'testModule');

                vm.hiprintTemplate = new hiprint.PrintTemplate({
                    template: vm.contentJson,
                    settingContainer: '#PrintElementOptionSetting',
                    fields: vm.fields
                });
                
                // 渲染设计器
                vm.hiprintTemplate.design('#hiprint-printTemplate');
            },

            // 调整纸张
            // type:  1、正常切换  2、自定义
            setPaper(printType) {
                const vm = this;
                if (printType === 'custom') {
                    if (!vm.width || !vm.height) {
                        return;
                    } 
                    vm.paperType = printType;
                    vm.hiprintTemplate.setPaper(vm.width, vm.height);
                } else {
                    vm.paperType = printType;
                    vm.hiprintTemplate.setPaper(printType);
                }
            },

            // 纸张旋转
            rotatePaper() {
                const vm = this;
                vm.hiprintTemplate.rotatePaper();
            },

            // 模板清空
            clearTemplate() {
                const vm = this;
                vm.hiprintTemplate.clear();
            },

            // 预览
            preview() {
            },

            // 保存模板json
            saveSchema() {
                const vm = this;
                vm.contentJson = vm.hiprintTemplate.getJson();
                abp.ajax({
                    type: 'post',
                    url: `/api/print-template/save-template-schema`,
                    data: JSON.stringify({
                        id: vm.templateId,
                        schema: JSON.stringify(vm.contentJson)
                    })
                }).then(res => {
                    if (res.code === 0) {
                        abp.notify.success(res.msg);
                    }
                })
            }
        },
        mounted() {
            const vm = this;
            vm.getTemplate().then(() => {
                vm.getFields()
                    .then(() => {
                        vm.hiPrintInit();
                    })
            });
        }
    });
});